<template>
  <van-icon
    :color="value ? '#ffa500' : ''"
    :name="value ? 'star' : 'star-o'"
    @click="onCollect"
  />
</template>

<script>
import { collect, noCollect } from "@/api/article.js";
import { debounce } from "@/utils/index.js";
export default {
  name: "CollectArticle",
  props: {
    value: {
      type: Boolean,
      required: true
    },
    articleId: {
      type: [Number, String, Object],
      required: true
    }
  },
  data() {
    return {
    };
  },
  methods: {
    onCollect: debounce(async function() {
       // 开始请求
      try {
        // 是否收藏
        if (this.value) {
          // 父组件 传递articleId
          await noCollect(this.articleId);
        } else {
          await collect(this.articleId);
        }
        // 更新视图
        this.$emit("input", !this.value);
        this.$toast.success(this.value ? "取消收藏" : "收藏成功");
      } catch (err) {
        this.$toast("操作失败，请重试");
      }
      // 请求结束
    }, 500),
    // async onCollect() {
    //   // 开始请求
    //   this.loading = true;
    //   try {
    //     // 是否收藏
    //     if (this.value) {
    //       // 父组件 传递articleId
    //       await noCollect(this.articleId);
    //     } else {
    //       await collect(this.articleId);
    //     }
    //     // 更新视图
    //     this.$emit("input", !this.value);
    //     this.$toast.success(this.value ? "取消收藏" : "收藏成功");
    //   } catch (err) {
    //     this.$toast("操作失败，请重试");
    //   }
    //   // 请求结束
    //   this.loading = false;
    // }
  }
};
</script>

<style scoped lang='less'>
::v-deep .collected {
    color: #ffa500;
}
</style>